<template>
  <div class="count">
    <header>
      <input type="text" v-model="inputVal"/>
      <button @click="add">添加</button>
    </header>
    <ul class="tab">
      <li
        v-for="(item, index) in list"
        :class="{ active: checkIndex == index }"
        :key="index"
        @click="cutTab(index)"
      >
        {{ item.title }}
      </li>
    </ul>
    <h2>{{list[checkIndex].extend}}</h2>
    <ul class="run-count">
      <li v-for="(n,i) in list[checkIndex].child" :key="i">
        <input type="text" v-if="n.iseit" v-abc v-model="n.name" @blur="n.iseit = false">
        <p v-else @dblclick="n.iseit = true">{{n.name}}</p>
        <span @click="del(i)">删除</span>
      </li>
      <!-- <li>三国演义</li> -->
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputVal: '', // input 的值
      list: [
        {
          title: "书籍",
          extend: "正在看书籍",
          child: [{name:"三国演义",iseit:false},{name:"红楼梦",iseit:false}, {name:"西游记",iseit:false}],
        },
        {
          title: "电影",
          extend: "正在看电影",
          child:[{name:"太极",iseit:false},{name:"敢死队",iseit:false}, {name:"机械师",iseit:false}],
        },
        {
          title: "游戏",
          extend: "正在玩游戏",
          child: [{name:"英雄联盟",iseit:false}, {name:"王者荣耀",iseit:false}],
        },
        {
          title: "综艺",
          extend: "正在看综艺",
          child:[{name:"王牌对王牌",iseit:false},{name:"吐槽大会",iseit:false}, {name:"奇葩说",iseit:false}],
        },
        {
          title: "体育",
          extend: "正在看体育",
          child:[{name:"足球",iseit:false},{name:"羽毛球",iseit:false}, {name:"乒乓球",iseit:false}]
        },
      ],
      checkIndex: 0, // 选中tab的索引
    };
  },
  created() {
    let val = JSON.parse(localStorage.getItem('tabList'));
    if (val){
      this.list = val;
    }
  },
  watch:{
    list:{
      handler(){
        localStorage.setItem('tabList',JSON.stringify(this.list));
      },
      deep:true
    }
  },
  methods: {
    add(){
      // !this.inputVal 不存在的意思
      if(!this.inputVal){
        alert('输入的内容不能为空')
        return;
      }

      // let arr = [1,2,3,4];
      // some 数组的方法 在数组中找到符合条件的元素就返回true，如果找不到就返回false
      // let bol = arr.some(item => item == 6);
      // console.log(bol);
      let bool = this.list[this.checkIndex].child.some(item => item == this.inputVal);
      console.log(bool);
      if (bool){
        alert('该数据已存在，不能重复添加')
        return;
      }
      this.list[this.checkIndex].child.push({name:this.inputVal,iseit:false});
      this.inputVal = '';
    },
    cutTab(val){
      this.checkIndex = val;
    },
    del(index){ // 删除事件
      this.list[this.checkIndex].child.splice(index,1);
    }
  },
  directives:{ // 自定义指令
     abc:{
       inserted(el){ // el 就是节点
        //  console.log(el);
        el.focus();
       }
     }
  }
};
</script>

<style lang='scss' scoped>
.count {
  width: 800px;
  height: 600px;
  margin: 100px auto;
  background: #ccc;
  li {
    list-style: none;
  }

  .tab {
    display: flex;
    .active {
      color: #fff;
      background: blue;
    }
    li {
      width: 100px;
      line-height: 50px;
      text-align: center;
      background: chartreuse;
    }
  }

  h2 {
    text-align: center;
    margin: 10px 0;
  }
  .run-count {
    span{
      display: none;
      margin-left: auto;
    }
    li {
      display: flex;
      height: 40px;
      align-items: center;
      padding: 0 20px;
      &:hover{
        background: blue;
        color: #fff;
        span{
          display: inline-block;
          cursor: pointer;
        }
      }
    }
  }
  header {
    display: flex;
    align-items: center;
    height: 50px;
    justify-content: center;
  }
  input {
    height: 40px;
    width: 300px;
  }
  button {
    height: 40px;
    // line-height: 40px;
    width: 80px;
    text-align: center;
    margin-left: 10px;
  }
}
</style>
